<template>
    <div class="leftnav" style="background-color: #304156">
        <el-menu default-active="5" router mode="vertical" class="el-menu-vertical-demo" background-color="#545c64"
            text-color="#fff" active-text-color="#ffd04b">

            <el-submenu v-for="(menu1, i) in menus" :key="i" :index="menu1.link">
                <!-- 第一层菜单 -->
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{ menu1.name }}</span>
                </template>
                <!-- 第二层菜单 -->
                <div v-for="(menu2, i2) in menu1.childrenMenu">
                    <!-- 如果没有子菜单 -->
                    <el-menu-item v-if="menu2.childrenMenu.length == 0" :index="menu2.link" :key="i + '-' + i2">
                        <template slot="title">
                            <i class="el-icon-document"></i>
                            <span>{{ menu2.name }}</span>
                        </template>
                    </el-menu-item>
                    <!-- 如果有子菜单 -->
                    <el-submenu v-if="menu2.childrenMenu.length != 0" :key="i + '-' + i2" :index="menu2.link">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>{{ menu2.name }}</span>
                        </template>
                        <!-- 第三层菜单 -->
                        <div v-for="(menu3, i3) in menu2.childrenMenu">
                            <!-- 如果没有子菜单 -->
                            <el-menu-item v-if="menu3.childrenMenu.length == 0" :index="menu3.link"
                                :key="i + '-' + i2 + '-' + i3">
                                <template slot="title">
                                    <i class="el-icon-document"></i>
                                    <span>{{ menu3.name }}</span>
                                </template>
                            </el-menu-item>
                            <!-- 如果有子菜单 -->
                            <el-submenu v-if="menu3.childrenMenu.length != 0" :key="i + '-' + i2 + '-' + i3"
                                :index="menu3.link">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{ menu3.name }}</span>
                                </template>
                                <div v-for="(menu4, i4) in menu3.childrenMenu">
                                    <!-- 如果没有子菜单 -->
                                    <el-menu-item v-if="menu4.childrenMenu.length == 0" :index="menu4.link"
                                        :key="i + '-' + i2 + '-' + i3 + '-' + i4">
                                        <template slot="title">
                                            <i class="el-icon-document"></i>
                                            <span>{{ menu4.name }}</span>
                                        </template>
                                    </el-menu-item>
                                </div>
                            </el-submenu>
                        </div>

                    </el-submenu>
                </div>


            </el-submenu>

        </el-menu>




        <!-- <el-menu default-active="1" router mode="vertical" class="el-menu-vertical-demo"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

              <el-submenu v-for="(item,i) in menus" :key="i" :index="item.link">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.name}}</span>
                    </template>
                    <el-submenu v-for="(menu2,i2) in item.childrenMenu" :index="menu2.link" :key="i+'-'+i2">
                        <el-menu-item v-if="menu2.childrenMenu.length==0" :index="menu2.link" :key="i+'-'+i2">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>{{menu2.name}}</span>
                                </template>
                        </el-menu-item>

                        <template slot="title" v-if="menu2.childrenMenu.length!=0">
                            <i class="el-icon-location"></i>
                            <span>{{menu2.name}}</span>
                        </template>

                        <el-submenu v-if="menu2.childrenMenu.length!=undefined&&menu2.childrenMenu.length!=0" v-for="(menu3,i3) in menu2.childrenMenu" :index="menu3.link" :key="i+'-'+i2+'-'+i3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{menu3.name}}</span>
                            </template>

                            <el-menu-item v-if="menu3.childrenMenu!=null" v-for="(menu4,i4) in menu3.childrenMenu" :index="menu4.link" :key="i+'-'+i2+'-'+i3+'-'+i4">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span>{{menu4.name}}</span>
                                </template>
                            </el-menu-item>


                        </el-submenu>

                    </el-submenu>

              </el-submenu>

              <el-menu-item index=""></el-menu-item>

            </el-menu> -->
    </div>
</template>


<script>
module.exports = {
    data() {
        return {
            menus: {},
            loding: true,
        }
    },
    created: function () {
        this.$http.get("/auth/getMenu")
            .then(r => {
                if (r.data.code == "200") {
                    this.menus = r.data.data;
                    this.loding = false;
                }
                else if (r.data.code != "701") {
                    alert(r.data.msg);
                } else {
                    alert(r.data.msg);
                    // location.href="http:/localhost:8081/login.html"
                }
            })
    }

}

</script>


<style>
.leftnav {
    /* 设置压缩因子 */
    flex-shrink: 0;
    position: relative;
    top: 70px;
}
</style>